@rpx: .5px;
@baseRed: #e71820;
@baseGreen: #44b549;
@green: #44b549;



.global_question_list {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  &.hide {
    display: none;
  }
  .question_list_mask_bg {
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
  }
  .q_table {
    display: table;
    width: 100%;
    height: 100%;
    .q_table_cell {
      display: table-cell;
      vertical-align: middle;
    }
  }
  .question_list_mask {
    position: relative;
    z-index: 101;
    transition: transform .3s;
    background-color: #fff;
    height: 80vh;
    width: 1000*@rpx;
    margin: 0 auto;
    border-radius: 20*@rpx;
    .close_icon {
      position: absolute;
      right: 25*@rpx;
      top: 25*@rpx;
      width: 50*@rpx;
      height: 50*@rpx;
      cursor: pointer;
    }
    .title {
      height: 10*@rpx;
      padding: 0 30*@rpx;
      color: #333;
      font-weight: 700;
      font-size: 36*@rpx;
      line-height: 100*@rpx;
    }
    .question_list {
      top: 100*@rpx;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      overflow-x: hidden;
      overflow-y: auto;
      .no_list {
        margin-top: 50*@rpx;
        text-align: center;
        color: #999;
        font-size: 15*@rpx;
      }
      .question_list_inner {
        .question_item {
          padding: 0 30*@rpx;
          border-top: 2*@rpx solid #f2f2f2;
          .question_content {
            padding: 30*@rpx 0;
            .question_text {
              color: #4f4f4f;
              font-size: 32*@rpx;
              font-weight: 600;
              line-height: 44*@rpx;
              text-indent: 54*@rpx;
              word-break: break-all;
              position: relative;
              text-align: left;
              .q_icon {
                position: absolute;
                top: 0;
                left: 0;
                width: 44*@rpx;
                height: 44*@rpx;
              }
              .q_hot_icon {
                position: absolute;
                top: 0;
                left: 54*@rpx;
                width: 36*@rpx;
                height: 44*@rpx;
              }
              &.has_hot {
                text-indent: 105*@rpx;
              }
            }
            .question_detail {
              margin-top: 20*@rpx;
              height: 44*@rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: left;
              .d_head {
                width: 44*@rpx;
                height: 44*@rpx;
                border-radius: 50%;
              }
              .d_name {
                color: #424346;
                font-size: 22*@rpx;
                margin: 0 15*@rpx;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .d_users {
                height: 44*@rpx;
                margin-right: 15*@rpx;
                .d_s_user {
                  height: 44*@rpx;
                  width: 44*@rpx;
                  margin-left: 5*@rpx;
                  border-radius: 50%;
                  &.no_left {
                    margin-left: 0;
                  }
                }
                &.double {
                  .d_s_user {
                    margin-left: -20*@rpx;
                    &.no_left {
                      margin-left: 0;
                    }
                  }
                }
              }
              .d_zan_con {
                height: 44*@rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #4f4f4f;
                font-size: 18*@rpx;
                cursor: pointer;
                .icon {
                  width: 26*@rpx;
                  height: 26*@rpx;
                  margin-right: 10*@rpx;
                }
                .count {
                  width: 30*@rpx;
                  text-align: center;
                }
                &.active {
                  color: @green;
                }
              }
            }
          }
          .answer_content {
            .no_answer {
              display: flex;
              justify-content: flex-end;
              padding: 30*@rpx 0;
              border-top: 2*@rpx solid #f2f2f2;
              .answer_btn {
                width: 160*@rpx;
                height: 60*@rpx;
                border-radius: 30*@rpx;
                background-color: @green;
                color: #fff;
                font-size: 26*@rpx;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
            .answer_item {
              padding: 30*@rpx 0;
              border-top: 2*@rpx solid #f2f2f2;
              .answer_top {
                .single_answer {
                  margin-bottom: 20*@rpx;
                  display: flex;
                  flex-direction: row;
                  .answer_top_icon {
                    width: 44*@rpx;
                    height: 44*@rpx;
                    margin-right: 15*@rpx;
                    &.hide{
                      opacity: 0;
                    }
                  }
                  .answer_blank {
                    flex: 1;
                  }
                  .answer_voice {
                    width: 300*@rpx;
                    height: 60*@rpx;
                    cursor: pointer;
                    border-top-left-radius: 0;
                    border-top-right-radius: 30*@rpx;
                    border-bottom-right-radius: 30*@rpx;
                    border-bottom-left-radius: 30*@rpx;
                    border: 2*@rpx solid @green;
                    padding: 0 20*@rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: row;
                    background-color: #edf8eb;
                    position: relative;
                    .answer_voice_time {
                      color: @green;
                      font-size: 24*@rpx;
                    }
                    .answer_voice_blank {
                      flex: 1;
                    }
                    .answer_voice_icon {
                      width: 20*@rpx;
                      height: 25*@rpx;
                    }
                    .answer_voice_loading {
                      position: absolute;
                      height: 20*@rpx;
                      width: 20*@rpx;
                      top: 20*@rpx;
                      right: -30*@rpx;
                    }
                  }
                  .answer_text {
                    word-break: break-all;
                    font-size: 24*@rpx;
                    text-align: left;
                    flex: 1;
                    line-height: 44*@rpx;
                    color: #4f4f4f;
                  }
                  .answer_image {
                    width: 200*@rpx;
                    height: 200*@rpx;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                    cursor: pointer;
                  }
                  .a_zan_con {
                    height: 44*@rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #4f4f4f;
                    font-size: 18*@rpx;
                    cursor: pointer;
                    .icon {
                      width: 26*@rpx;
                      height: 26*@rpx;
                      margin-right: 10*@rpx;
                    }
                    .count {
                      width: 30*@rpx;
                      text-align: center;
                    }
                    &.active {
                      color: @green;
                    }
                  }
                }

              }
              .answer_bottom {
                margin-top: 20*@rpx;
                height: 44*@rpx;
                display: flex;
                align-items: center;
                position: relative;
                .a_head {
                  width: 44*@rpx;
                  height: 44*@rpx;
                  border-radius: 50%;
                }
                .a_name {
                  color: #424346;
                  font-size: 22*@rpx;
                  margin-left: 15*@rpx;
                  margin-right: 30*@rpx;
                  max-width: 500*@rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .re_answer_btn {
                  position: absolute;
                  top: -8*@rpx;
                  right: 0;
                  height: 60*@rpx;
                  width: 160*@rpx;
                  border-radius: 30*@rpx;
                  background-color: @green;
                  color: #fff;
                  font-size: 26*@rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  }
}
